# COUNTDOWN VIEW
# -----------------------------------------------------------------------------
# This is the egg timer view.

class EggTimerView extends window.App.BaseView

    # Cached variables.
    seconds: 0
    selectedSize: null
    selectedYolk: null

    # Init the view.
    init: =>
        @setDom ["#eggImage", "#eggImageIn", "#eggSquidgy", "#eggFirm", "#eggDescription",
                 "#eggCountdown", "#eggSizeTip", "#butSubmit", "#sound"]
        @setEvents()

        # Check cookies.
        cookieSize = $.cookie "eggSize"
        cookieYolk = $.cookie "eggYolk"

        # Set egg size based on cookies, or default to medium.
        if cookieSize? and cookieSize isnt ""
            @selectedSize = cookieSize
        else
            @selectedSize = "medium"

        # Set egg yolk based on cookies, or default to squidgy.
        if cookieYolk? and cookieYolk isnt ""
            @selectedYolk = cookieYolk
        else
            @selectedYolk = "squidgy"

        # Preset the egg size.
        @dom.eggImage.addClass @selectedSize

        # Preset yolk type.
        if @selectedYolk is "squidgy"
            @squidgyClick()
        else
            @firmClick()

        @updateDescription()

        # Blink the "tap to change size" on mobile devices.
        if @dom.eggSizeTip.length > 0
            @dom.eggSizeTip.blink {callback: @hideSizeTip}

    # Bind events to DOM elements.
    setEvents: =>
        @dom.eggImage.click @eggClick
        @dom.eggSquidgy.click @squidgyClick
        @dom.eggFirm.click @firmClick

        @dom.butSubmit.click @startTimer

    # Fade out the "tap to change size" tooltip.
    hideSizeTip: =>
        hideCallback = => @dom.eggSizeTip.fadeOut App.Settings.EggTimer.fadeDelay
        setTimeout hideCallback, App.Settings.EggTimer.tooltipDelay

    # Update the egg description based on the selected size and egg yolk.
    updateDescription: =>
        @dom.eggDescription.html App.Messages["#{@selectedYolk}EggMsg"].replace "{size}", App.Messages[@selectedSize]

    # When user clicks an egg, highlight and set its size as selected.
    eggClick: (e) =>
        if @dom.eggImage.hasClass "medium"
            @selectedSize = "large"
        else if @dom.eggImage.hasClass "large"
            @selectedSize = "xlarge"
        else
            @selectedSize = "medium"

        @dom.eggImage.removeClass().addClass @selectedSize
        @updateDescription()

        if App.Settings.General.debug
            console.log "EggTimerView.eggClick", "Selected size: #{@selectedSize}"

    # Selects the "squidgy" egg style.
    squidgyClick: (e) =>
        @dom.eggFirm.removeClass "active"
        @dom.eggSquidgy.addClass "active"
        @selectedYolk = "squidgy"
        @updateDescription()

        if App.Settings.General.debug
            console.log "EggTimerView.squidgyClick"

    # Selects the "firm" egg style.
    firmClick: (e) =>
        @dom.eggSquidgy.removeClass "active"
        @dom.eggFirm.addClass "active"
        @selectedYolk = "firm"
        @updateDescription()

        if App.Settings.General.debug
            console.log "EggTimerView.firmClick"

    # Start the egg timer. The seconds will be set depending on egg size and yolk.
    startTimer: =>
        if App.Settings.General.debug
            console.log "EggTimerView.startTimer", @selectedSize, @selectedYolk

        if @selectedSize is "xlarge"
            @seconds = 360
        else if @selectedSize is "large"
            @seconds = 300
        else
            @seconds = 240

        # Increase seconds for firm eggs by 1.5 times.
        if @selectedType is "firm"
            @seconds = @seconds * 1.5

        # Hide yolk selectors and button, show the inside egg.
        @dom.butSubmit.remove()
        @dom.eggSquidgy.animate {opacity: 0}, App.Settings.EggTimer.fadeDelay
        @dom.eggFirm.animate {opacity: 0}, App.Settings.EggTimer.fadeDelay
        @dom.eggImage.unbind "click"
        @dom.eggImageIn.addClass(@selectedSize).show()

        animateCallback = => @dom.eggImageIn.animate {opacity: 0}, (@seconds - App.Settings.EggTimer.blinkInSeconds) * 1000
        @dom.eggImageIn.animate {opacity: 1}, App.Settings.EggTimer.fadeDelay, animateCallback

        # Start the countdown.
        @doCountdown()

        # Save cookies.
        $.cookie "eggSize", @selectedSize, {expires: App.Settings.General.cookieExpires}
        $.cookie "eggYolk", @selectedYolk, {expires: App.Settings.General.cookieExpires}

        # Post data to the database.
        @submitEggTimer()

    # Decrease the timer every second and update the message.
    doCountdown: =>
        @dom.eggCountdown.html App.Messages.eggReadyInSeconds.replace "{seconds}", @seconds

        if @seconds > 0
            @seconds--
            setTimeout @doCountdown, 1000

            # Blink the inner egg when it's almost ready.
            if @seconds is App.Settings.EggTimer.blinkInSeconds
                @dom.eggImageIn.stop().blink {delay: 1950, repeat: App.Settings.EggTimer.blinkInSeconds / 2}
        else
            @onFinish()

    # When timer is over shake the egg, play a sound and hide unecessary elements.
    onFinish: =>
        @dom.eggCountdown.hide()
        @dom.eggImageIn.hide()
        @dom.eggImage.addClass("finished").shake()

        # Shake egg and play sound now, and then again after a few seconds.
        @dom.eggImage.shake {duration: App.Settings.EggTimer.shakeDuration}
        @playSound()
        setTimeout @playSound, App.Settings.EggTimer.repeatAlertAfter

        if App.Settings.General.debug
            console.log "EggTimerView.onFinish"

    # Play the bell. This will happen twice when the timer is over.
    playSound: =>
        @dom.sound[0].pause()
        @dom.sound[0].currentTime = 0
        @dom.sound[0].play()

    # Post [Egg Timer](eggTimer/html) details to the remote database.
    submitEggTimer: =>
        egg = new App.EggTimer()
        egg.set "size", @selectedSize
        egg.set "yolk", @selectedYolk

        # Save egg timer to the database. Don't care if it's successful or not.
        egg.save()

        if App.Settings.General.debug
            console.log "EggTimerView.submitEggTimer", egg.attributes


# APPEND VIEW TO WINDOW
# -----------------------------------------------------------------------------
window.App.currentView = new EggTimerView()